var postFile = {
    init: function() {
        var t=this;
        // 获取各HTML对象
        t.regional = document.getElementById('label');
        t.getImage = document.getElementById('get_image');
        t.editPic = document.getElementById('edit_pic');
        t.editBox = document.getElementById('cover_box');
        t.px = 0;
        t.py = 0;  // 背景图片的坐标；图片的左上角在canvas画布坐标中的位置
        t.sx = 15;
        t.sy = 15;
        t.sHeight = 150;
        t.sWidth = 150;
        t.gHeight = 104;
        t.gWidth = 104;
        document.getElementById('post_file').addEventListener("change", t.handleFiles, false);  // 监听文件上传表单，并传入handleFiles

        // 保存图片
        // 监听save_button事件
        document.getElementById('save_button').onclick = function() {
            t.editPic.height = t.sHeight;
            t.editPic.width = t.sWidth;
            var ctx = t.editPic.getContext('2d');
            var images = new Image();
            images.src = t.imgUrl;

            images.onload = function() {
                // 绘制选中的裁减区域
                ctx.drawImage(images, t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth);
                // toDataURL()将图片转为base64编格格式并赋值给show_pic下的imag的src属性
                document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.editPic.toDataURL();
            }
        }
    },
    handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList); // readAsDataURL()返回文件对象的地址
        oFReader.onload = function (oFREvent) {
            postFile.paintImage(oFREvent.target.result); // 获取图片的地址并调用paintImage
        };
    },
    paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d"); // 获取canvas对象
        var img = new Image();
        img.src = url; // 将上传图片的url传递给img
        img.onload = function(){
            // 判断条件：图像的长宽和canvas画布对象的长宽比较；offsetWidth,offsetHeight是css对象lable设置的宽度和高度
            if (img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;
            } else {
                // 当图片超出canvas的面积时，按比例缩小图片
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var PHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetWidth : pHeight;
            }
            //计算图片显示的位置坐标；'px'是像素单位
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';
            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;
            createCanvas.drawImage(img, 0, 0, t.imgWidth, t.imgHeight); // 绘制图像
            t.imgUrl = t.getImage.toDataURL();
            t.cutImage() // 绘图后，调用cutImage()进行裁减
            t.drag();
        };
    },
    cutImage: function() {
        var t = this;
        // 绘制遮罩层（即背景图阴影化）
        t.editBox.height = t.imgHeight;
        t.editBox.width = t.imgWidth;
        t.editBox.style.display = 'block';
        t.editBox.style.left = t.px;
        t.editBox.style.top = t.py;
        // 绘制裁减区域并高亮
        var cover = t.editBox.getContext("2d");
        cover.fillStyle = "rgba(0, 0, 0, 0.5)";
        cover.fillRect (0,0, t.imgWidth, t.imgHeight);
        cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth); // 高亮裁减区域

        // 实时预览选择的裁减区域
        document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';
        document.getElementById('show_edit').style.height = t.sHeight + 'px';
        document.getElementById('show_edit').style.width = t.sWidth + 'px';
    },
    drag: function() {
        // drag()实现可用鼠标操作裁减区域
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;
        // onmousemove监听鼠标移动（按住左键）
        document.getElementById('cover_box').onmousemove = function(e) {

            // 计算鼠标位置与背景图片的距离
            // e.pageX是鼠标到浏览器左边缘的距离
            //t.regional.offsetLeft+this.offsetLeft是图片到浏览器的左边缘距离
            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
            // 判断鼠标是否在图片的区域内部
            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = 'move';

                this.onmousedown = function(){
                    draging = true;
                    // 记录上一次鼠标的坐标
                    t.ex = t.sx;
                    t.ey = t.sy;

                    // 记录鼠标按下时侯的坐标
                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {
                    // 当鼠标在拖动时实时更新t.sx, t.sy
                    // 移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)
                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = 'auto';
            }
        };
    }
}
postFile.init(); // 调用init()方法以使代码运作
